/** * Create by mzq * Description: 左侧快速检测实时监控 * Date: 2024/9/12 16:08 * Update: 2024/9/12
16:08 */
<template>
  <div class="bg">
    <div class="title flex justify-center">快速检测实时监控</div>

    <BlackBorder title="数据异常用户监控">
      <template #content>
        <div class="flex flex-wrap items-center justify-center text-white">
          <div v-for="item in DataAbnormality" :key="item.id" class="w-[32%] mt-[0.1354rem]">
            <div class="flex justify-center items-center">
              <div>
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="flex flex-col ml-[0.026rem]">
                <div class="topTitle">{{ item.name }}</div>
                <div>
                  <countTo
                    class="Number"
                    :separator="''"
                    :startVal="0"
                    :endVal="item.number"
                  ></countTo>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </BlackBorder>

    <BlackBorder class="mt-[0.0521rem]" title="当日用户监控">
      <template #content>
        <vue3ScrollSeamless
          v-if="DayUserMonitor.length > 0"
          class="h-[0.9115rem] overflow-hidden"
          :classOptions="classOptions"
          :dataList="DayUserMonitor"
        >
          <div
            v-for="item in DayUserMonitor"
            :key="item.id"
            class="content mt-[0.0833rem] border-b border-[#716D6A]"
          >
            <div class="flex">
              <div class="mr-[6px]">
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="flex flex-col flex-1">
                <div class="flex">
                  <div class="mr-[0.0833rem]">{{ item.userName }}</div>
                  <div class="text-[#999999]">{{ item.userAge }}</div>
                </div>
                <div class="flex items-center state flex-auto UserMonitoring">
                  <div class="flex">
                    <div class="text-[#999999] w-[0.2604rem]">血管弹性异常</div>
                    <div
                      class="w-full flex-1 ml-[0.046875rem] pr-[0.026rem] border-r border-[#8C8C8C]"
                    >
                      <span v-if="item.hardScore < 60" class="text-[#F75A72]">{{
                        item.hardScore
                      }}</span>
                      <span
                        v-else-if="item.hardScore >= 60 && item.hardScore <= 75"
                        class="text-[#ffd642]"
                        >{{ item.hardScore }}</span
                      >
                      <span v-else-if="item.hardScore > 75" class="text-[#38E6D4]">{{
                        item.hardScore
                      }}</span>
                    </div>
                  </div>
                  <div class="flex pl-[0.03125rem]">
                    <div class="text-[#999999] w-[0.2604rem]">血流调节异常</div>
                    <div
                      class="w-full flex-1 ml-[0.046875rem] pr-[0.026rem] border-r border-[#8C8C8C]"
                    >
                      <span v-if="item.adjustScore < 60" class="text-[#F75A72]">{{
                          item.adjustScore
                        }}</span>
                      <span
                        v-else-if="item.adjustScore >= 60 && item.adjustScore <= 75"
                        class="text-[#ffd642]"
                      >{{ item.adjustScore }}</span
                      >
                      <span v-else-if="item.adjustScore > 75" class="text-[#38E6D4]">{{
                          item.adjustScore
                        }}</span>
                    </div>
                  </div>
                  <div class="flex pl-[0.03125rem]">
                    <div class="text-[#999999] w-[0.2604rem]">血流波动异常</div>
                    <div
                      class="w-full flex-1 ml-[0.046875rem] pr-[0.026rem] border-r border-[#8C8C8C]"
                    >
                      <span v-if="item.healthScore < 60" class="text-[#F75A72]">{{
                          item.healthScore
                        }}</span>
                      <span
                        v-else-if="item.healthScore >= 60 && item.healthScore <= 75"
                        class="text-[#ffd642]"
                      >{{ item.healthScore }}</span
                      >
                      <span v-else-if="item.healthScore > 75" class="text-[#38E6D4]">{{
                          item.healthScore
                        }}</span>
                    </div>
                  </div>
                  <div class="flex pl-[0.03125rem]">
                    <div class="text-[#999999]">心率异常</div>
                    <div class="w-full flex-1 ml-[0.046875rem] pr-[0.026rem]">
                      <span v-if="item.heartBeat < 60" class="text-[#F75A72]">{{
                          item.heartBeat
                        }}</span>
                      <span
                        v-else-if="item.heartBeat >= 60 && item.heartBeat <= 75"
                        class="text-[#ffd642]"
                      >{{ item.heartBeat }}</span
                      >
                      <span v-else-if="item.heartBeat > 75" class="text-[#38E6D4]">{{
                          item.heartBeat
                        }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </vue3ScrollSeamless>
      </template>
    </BlackBorder>
  </div>
</template>
<script setup>
import { vue3ScrollSeamless } from 'vue3-scroll-seamless'
import { CountTo } from 'vue3-count-to'
import BlackBorder from '@/views/components/BlackBorder.vue'
import { ref, watch } from 'vue'
import { getImageUrl } from '@/utils/index.js'

// 调节
const adjustRiskCount = ref(0)
// 弹性
const hardRiskCount = ref(0)
// 心率
const heartBeatRiskCount = ref(0)
// 波动
const healthRiskCount = ref(0)

const defineProps = defineProps({
  data: Object
})

// 数据异常用户监控
const DataAbnormality = ref([
  {
    id: 2,
    imgUrl: getImageUrl('left/2.png'),
    name: '血管弹性异常',
    number: hardRiskCount
  },
  {
    id: 3,
    imgUrl: getImageUrl('left/1.png'),
    name: '血流调节异常',
    number: adjustRiskCount
  },
  {
    id: 4,
    imgUrl: getImageUrl('left/3.png'),
    name: '血流波动异常',
    number: healthRiskCount
  },
  {
    id: 5,
    imgUrl: getImageUrl('left/4.png'),
    name: '心率异常',
    number: heartBeatRiskCount
  }
])

// 当日用户监控
const DayUserMonitor = ref([])

const classOptions = {
  limitMoveNum: 1,
  isSingleRemUnit: true
}
// 60以下红色
// 60-75黄色
// 75以上绿色
watch(
  () => defineProps.data,
  (val) => {
    // 调节
    adjustRiskCount.value = val.historyReportCnt.adjustRiskCount
    // 弹性
    hardRiskCount.value = val.historyReportCnt.hardRiskCount
    // 心率
    heartBeatRiskCount.value = val.historyReportCnt.heartBeatRiskCount
    // 波动
    healthRiskCount.value = val.historyReportCnt.healthRiskCount


    if (val.recentUserReport.reports.length > 0) {
      for (let i = 0; i < val.recentUserReport.reports.length; i++) {
        let obj = {}
        obj.userName = val.recentUserReport.reports[i].userName
        obj.userAge = val.recentUserReport.reports[i].userAge
        obj.imgUrl = getImageUrl('man.png')
        obj.adjustScore = val.recentUserReport.reports[i].adjustScore
        obj.hardScore = val.recentUserReport.reports[i].hardScore
        obj.heartBeat = val.recentUserReport.reports[i].heartBeat
        obj.healthScore = val.recentUserReport.reports[i].healthScore
        DayUserMonitor.value.push(obj)
      }
    }

  }
)
</script>
<style scoped lang="scss">
.bg {
  width: 2.2604rem /* 434/192 */;
  height: 2.151rem /* 413/192 */;
  background: url('@/image/bg.png') no-repeat;
  background-size: 100% 100%;
  padding-left: 0.0417rem /* 8/192 */;
  padding-right: 0.0417rem /* 8/192 */;

  .title {
    font-family: 'alimamashuheiti';
    color: #4adde4;
    font-size: 0.0729rem /* 14/192 */;
    margin-top: 0.0208rem /* 4/192 */;
    margin-bottom: 0.0625rem /* 12/192 */;
  }
}

.topTitle {
  font-family: 'OPPOSans';
  font-size: 0.0521rem /* 10/192 */;
}

.Number {
  font-family: 'Digib';
  color: #0ad1c9;
  font-size: 0.09375rem /* 18/192 */;
}

.state {
  font-size: 0.0417rem /* 8/192 */;
}

.content {
  margin-left: 0.0521rem /* 10/192 */;
  margin-right: 0.0521rem /* 10/192 */;
  padding-left: 0.0417rem /* 8/192 */;
  padding-bottom: 0.03125rem /* 6/192 */;
}
</style>
